<script setup>
import NutritionCard from './NutritionCard.vue';
import {parseMarkdown} from "../utils/markdownUtils.js";

const props = defineProps({
  nutritionData: {
    type: Object,
    required: true
  },
  recommendations: {
    type: String,
    default: ''
  },
});

const nutritionCards = [
  {key: 'Calories', id: '卡路里', unit: 'KJ', icon: '🔥'},
  {key: 'Protein', id: '蛋白质', unit: 'g', icon: '🥩'},
  {key: 'Carbs', id: '碳水化合物', unit: 'g', icon: '🌾'},
  {key: 'Fat', id: '脂肪', unit: 'g', icon: '🥑'},
  {key: 'Ca', id: '钙', unit: 'mg', icon: '🥛'},
  {key: 'Fe', id: '铁', unit: 'mg', icon: '🍖'},
  {key: 'K', id: '钾', unit: 'mg', icon: '🍌'},
  {key: 'Mg', id: '镁', unit: 'mg', icon: '🥜'},
  {key: 'Na', id: '钠', unit: 'mg', icon: '🧂'},
  {key: 'P', id: '磷', unit: 'mg', icon: '🍗'},
  {key: 'VitaminA', id: '维生素A', unit: 'mg', icon: '🥕'},
  {key: 'VitaminC', id: '维生素C', unit: 'mg', icon: '🍊'},
];

const getValue = (key, unit) => {
  const dictKey = `${key}/${unit}`;
  return props.nutritionData.dict?.[dictKey] || 0;
};

</script>

<template>
  <div class="space-y-8">
    <!-- Nutrition Facts -->
    <div class="bg-white rounded-xl shadow-sm p-6">
      <h2 class="text-xl font-semibold mb-6 text-gray-800">营养成分含量</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <NutritionCard
            v-for="card in nutritionCards"
            :key="card.key"
            :title="card.id"
            :value="getValue(card.key, card.unit)"
            :unit="card.unit"
            :icon="card.icon"
        />
      </div>
    </div>

    <!-- Recommendations -->
    <div v-if="recommendations" class="bg-white rounded-xl shadow-sm p-6">
      <h2 class="text-xl font-semibold mb-4 text-gray-800">饮食改善建议</h2>
      <p class="text-gray-700" style="white-space: pre-line;">{{ recommendations }}</p>
    </div>


  </div>
</template>